<template>
	<view class="bgColor-white">
		<cu-custom :key="'header'+headerKey" bgColor="bg-gradual-red-yellow" :isBack="true" backText="返回" title="举报"></cu-custom>
		<view class="content">
			<view class="title">
				<text>反馈内容问题</text>
			</view>
			<u-checkbox-group @change="checkboxGroupChange">
				<u-checkbox 
					@change="checkboxChange" 
					v-model="item.checked" 
					v-for="(item, index) in list" :key="index" 
					:name="item.name"
					shape="circle"
					active-color="#ed7d8c"
				>{{item.msg?item.msg:item.name}}</u-checkbox>
			</u-checkbox-group>
			
			<view class="title">
				<text>其他问题</text>
			</view>
			<view class="input">
				<textarea
					:cursor-spacing="20"
					:show-confirm-bar="false"
					:fixed="true"
					:maxlength="500"
					v-model.trim="reportMsg"
					placeholder-class="input-placeholder-class"
					placeholder="写下您的建议,我们将尽快处理"
				/>
			</view>
		</view>
		<view  class="cu-bar foot-zh bg-white" >
			<button class="cu-btn shadow margin-tb-sm lg bg-gradual-red-yellow" style="width: 100%;" @tap="addReport">提交</button>
		</view>
	</view>
</template>

<script>
	import api from '@/api/system/article.js';
	import store from '@/store';
	export default {
		onShow() {
			this.headerKey += 1;
		},
		data() {
			return {
				headerKey:0,
				articleId:null,
				accessToken: store.state.hh_token,
				reportMsg:'',
				reportReasonList:[],
				list: [
					{
						name: '标题党',
						checked: false,
						disabled: false
					},
					{
						name: '地域攻击',
						checked: false,
						disabled: false
					},
					{
						name: '无端谩骂',
						checked: false,
						disabled: false
					},
					{
						name: '营销诈骗',
						checked: false,
						disabled: false
					},
					{
						name: '淫秽色情',
						checked: false,
						disabled: false
					},
					{
						name: '反动谣言',
						checked: false,
						disabled: false
					},
					{
						name: '政治敏感',
						checked: false,
						disabled: false
					},
					{
						name: '内容虚假',
						checked: false,
						disabled: false
					},
					{
						name: '广告软文',
						checked: false,
						disabled: false
					},
					{
						name: '内容引起不适',
						checked: false,
						disabled: false
					},
					
					{
						name: '格式不规范',
						msg:'格式不规范（错别字多、文字堆砌重复、标题与内容不符）',
						checked: false,
						disabled: false
					},
					{
						name: '侵权抄袭',
						checked: false,
						disabled: false
					},
					{
						name: '其他问题',
						checked: false,
						disabled: false
					}
				]
			}
		},
		onLoad: function (option) {
			this.articleId=option.articleId
			
		},
		methods: {
			// 选中某个复选框时，由checkbox时触发
			checkboxChange(e) {
				//console.log(e);
			},
			// 选中任一checkbox时，由checkbox-group触发
			checkboxGroupChange(e) {
				this.reportReasonList=e
			},
			/*添加举报*/
			addReport(){
				if(!this.accessToken||this.accessToken==''){
					uni.navigateTo({
						url: '/pages/system/login/login?goBackFlag='+'true'
					})
				}
				const data = {}
				data.articleId =this.articleId
				data.reportReasonList=this.reportReasonList
				this.$http.post(api.articleReport, data).then(res => {
					this.$Router.back(1)
				}).catch(error => {
					
				})
				
				
			}
		}
	}
</script>

<style scoped lang="scss">
.content {
	padding: 0 30rpx 30rpx 30rpx;
	background: #fff;
	.title {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		font-size: 32rpx;
		color: #303133;
		font-weight: bold;
		padding-top: 20rpx;
		text {
			padding-bottom: 20rpx;
			line-height: normal;
		}
		
	}
	.input {
		flex-grow: 1;
		flex-shrink: 1;
		display: flex;
		align-items: center;
		background: #f8f8f8;
		border-radius: 20rpx;
		line-height: normal;
		padding: 20rpx 20rpx 20rpx 20rpx;
		textarea {
			//padding: 10rpx 0;
			width: 100%;
			font-size: 28rpx;
			height: 300rpx;
			background: #f8f8f8;
		}
	}
}
.input-placeholder-class {
	color: $uni-text-color-placeholder;
	font-size: 28rpx;
}
</style>
